<template>
  <div class="lpl">
    <div>
      <Fanhui />
    </div>
      <div class="lol">
        <img src="https://gw.alicdn.com/tfs/TB1puqzr6MZ7e4jSZFOXXX7epXa-160-160.png" alt="">
      </div>
    <div>
   
    <!-- <van-form @submit="onSubmit">
      <van-field
        name="mobile"
        label="手机号"
        placeholder="手机号"
        @touchstart.native.stop="show = true"
        readonly
        clickable
        :value="value"
        :rules="[{ required: true, pattern, message: '请输入正确手机号' }]"
      /> -->
      
    <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="mobile"
    label="账号"
    placeholder="账号"
    :rules="[{ required: true,pattern, message: '请输入正确手机号'  }]"
  />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, validator, message: '请填写正确密码,最少六位' }]"
      />

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
    </div>
  </div>
</template>

<script>
import Fanhui from "@/views/Center/fanhui.vue";
import Vue from "vue";
import { Form, Field, Button  } from "vant";
import { NumberKeyboard,Toast } from "vant";
Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
Vue.use(Toast);
Vue.use(NumberKeyboard);
import { Notify } from 'vant';

export default {
  data() {
    return {
     username: "",
      password: "",
      show: false,
      value: "",
      pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
    };
  },
  components: {
    Fanhui,
  },
  methods: {
     validator(val) {
      return /^[0-9]{6,18}$/.test(val);
    },
    onSubmit(values) {
      console.log("submit", values);
    },    onSubmit(values) {
        console.log("submit", values);
        // 发起登录请求
        this.$http.post("http://8.140.9.127:3721/backend/login", values).then((ret) => {
            if (ret.error_code === 0) {
                Toast.success("登录成功");
                // 跳转到个人中心页面
                if(this.$route.query.callback){
                        this.$router.push(this.$route.query.callback)
                        
                }else{
                     this.$router.push("/center");
                        Notify({ type: 'success', message: '登陆成功' });
                }
              
            } else {
                Toast.fail(ret.message);
            }
        });
    },
  },
  created() {
    this.$store.commit("setIsShow", false);
  },

  mounted() {},
  beforeDestroy() {
    this.$store.commit("setIsShow", true);
  },
};
</script>

<style scoped>
.van-form{
  margin-top: 50px;
}
.lpl{
  height: 100%;
  width: 100%;

}
.van-button--info{
  background-color:#FF5000 ;
  border: 1px solid #fff;
}
.lol{
 width: 100%;
}
.lol img{
  display: block;
 
  margin: 0 auto;
   margin-top: 50px;
  }
</style>